<template>
  <view class="user-features">
    <!--#ifndef H5-->
    <button v-if="!mobile && isLogin" class="he-item he-item__btn flex justify-between" open-type="getPhoneNumber" hover-class="" @getphonenumber="getPhoneNumber">
      <view class="flex">
        <view class="iconfont iconpersonalcenter_phone"></view>
        <text class="he-text">绑定手机号</text>
      </view>
      <view class="task-user-tips">{{binding.remark||''}}</view>
      <view class="iconfont iconbtn_arrow"></view>
    </button>
    <view class="he-item flex justify-between" v-else @click="bindPhone">
      <view class="flex">
        <view class="iconfont iconpersonalcenter_phone"></view>
        <text class="he-text">绑定手机号</text>
      </view>
      <view class="flex">
        <text class="he-mobile" v-if="mobile">{{ mobile }}</text>
        <view class="iconfont iconbtn_arrow"></view>
      </view>
    </view>
    <!--#endif-->
    <!--#ifdef H5-->
    <view class="he-item flex justify-between" @click="bindPhone">
      <view class="flex">
        <view class="iconfont iconpersonalcenter_address"></view>
        <text class="he-text">绑定手机号</text>
      </view>
      <view class="flex">
        <view class="task-user-tips" v-if="!mobile"> {{binding.remark||''}}</view>
        <text class="he-mobile" v-if="mobile">{{ mobile }}</text>
        <view class="iconfont iconbtn_arrow"></view>
      </view>
    </view>
    <!--#endif-->
    <view class="he-item flex justify-between" @click="navigateTo('/pages/user/shipping-address')">
      <view class="flex">
        <view class="iconfont iconpersonalcenter_address"></view>
        <text class="he-text">收货地址</text>
      </view>
      <view class="iconfont iconbtn_arrow"></view>
    </view>
    <template v-if="isLogin">
      <view class="he-item flex justify-between" @click="navigateTo('/plugins/task/userinfo')">
        <view class="flex">
          <view class="iconfont iconpersonalcenter_information"></view>
          <text class="he-text">个人信息</text>
        </view>
        <view class="task-user-tips"> {{perfect.remark||''}}</view>
        <view class="iconfont iconbtn_arrow"></view>
      </view>
    </template>
    <view class="he-item flex justify-between" @click="clearStorage">
      <view class="flex">
        <view class="iconfont iconpersonalcenter_clearcache"></view>
        <text class="he-text">清除缓存</text>
      </view>
      <view class="iconfont iconbtn_arrow"></view>
    </view>
    <view class="he-item flex justify-between" v-if="storeSetting.contact.phone.bool" @click="isHeTell = true">
      <view class="flex">
        <view class="iconfont iconpersonalcenter_phone2"></view>
        <view class="he-content-text">
          <view class="he-text">电话客服</view>
          <view class="he-time" v-if="isEmpty(storeSetting.contact.phone)">{{
            storeSetting.contact.phone.time
            }}</view>
        </view>
      </view>
      <view class="iconfont iconbtn_arrow"></view>
    </view>
    <!-- #ifndef H5 -->
    <button open-type="contact" class="he-item flex justify-between he-item__btn" v-if="storeSetting.contact.online.bool">
      <view class="flex">
        <view class="iconfont iconpersonalcenter_contactus"></view>
        <view class="he-content-text">
          <view class="he-text">在线客服</view>
          <view class="he-time" v-if="isEmpty(storeSetting.contact.online)">{{
            storeSetting.contact.online.time
            }}</view>
        </view>
      </view>
      <view class="iconfont iconbtn_arrow"></view>
    </button>
    <!-- #endif -->
    <view class="he-item flex justify-between" v-if="storeSetting.contact.friend.bool" @click="isQrcode = true">
      <view class="flex">
        <view class="iconfont iconpersonalcenter_add"></view>
        <view class="he-content-text">
          <view class="he-text">加好友联系</view>
          <view class="he-time" v-if="isEmpty(storeSetting.contact.friend)">{{
            storeSetting.contact.friend.time
            }}</view>
        </view>
      </view>
      <view class="iconfont iconbtn_arrow"></view>
    </view>
    <he-tell v-model="isHeTell" :phone-number="storeSetting.contact && storeSetting.contact.phone.value"></he-tell>
    <user-qrcode v-model="isQrcode"></user-qrcode>
    <!--清理缓存-->
    <he-clear-storage v-model="isClear"></he-clear-storage>
    <!--绑定手机-->
    <user-bind-phone v-model="isBind"></user-bind-phone>
    <template v-for="(item, index) in popupsList">
      <taskpopups :key="index" v-model="item.display" :title="item.remark" :index="index"></taskpopups>
    </template>
  </view>
</template>
<script>
import userQrcode from "./user-qrcode.vue";
import heClearStorage from "@/components/he-clear-storage.vue";
import userBindPhone from "./user-bind-phone.vue";
import heTell from "@/components/he-tell.vue";

import taskpopups from "@/plugins/task/components/popups.vue";

export default {
  name: "user-features",
  components: {
    userQrcode,
    heClearStorage,
    userBindPhone,
    heTell,
    taskpopups
  },
  computed: {
    mobile: function() {
      let data = this.$store.state.apply.userInfo.mobile;
      if (!data) return null;
      data = data + "";
      if (data) {
        this.getTaskBinding();
      }
      return data ?
        data
        .match(/(\d{3})(\d{4})(\d{4})/)
        .slice(1)
        .reduce(function(value, item, index) {
          return index === 1 ? value + "****" : value + item;
        }) :
        null;
    },
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  data() {
    return {
      isQrcode: false,
      isTell: false,
      isClear: false,
      isHeTell: false,
      isBind: false,
      perfect: {},
      binding: {},
      popupsList: [],
      is_binding: false
    };
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    //this.handleLoad();
    console.log("获取父级", this)
  },
  methods: {
    handleLoad() {
      console.log("执行我了呀，真的真的")
      this.popupsList = [];
      this.statusTaskBinding();
      this.statusTaskPerfect();
    },

    /**
     * 签到列表计算
     * @return {[type]} [description]
     */
    statusTaskBinding() {
      //判断当前任务是否打开
      this.$heshop.plugin("get", { include: "task", model: "task", keyword: "binding" }).then(res => {
        console.log("查看绑定手机号任务是否开启", res)
        if (res.status) {
          this.binding = res;
          this.getTaskBinding();
        }
      }).catch(err => {
        console.log("err", err)
      })
    },
    /**
     * 获取获取设置状态
     * @return {[type]} [description]
     */
    getTaskBinding() {
      //用于单次提示
      const value = uni.getStorageSync('statusTaskBinding');
      if (value) {
        this.binding = {};
        return true
      }
      this.$heshop.plugin("get", { include: "task", model: "score", type: 'single', keyword: 'binding' }).then(res => {
        console.log("判断是否完成过该任务")
        //判断如果存在的状态下
        if (res && res.status === 0 && !this.is_binding) {
          this.is_binding = true;
          this.popupsList.push({
            display: true,
            remark: res.remark
          })
          this.$parent.handleLoadData()
          this.binding = {};
          uni.setStorageSync('statusTaskBinding', 1);
        } else if (res && res.status === 1) {
          this.binding = {};
        } else {
          //如果没有记录的状态下
          this.setTaskBinding();
        }
      }).catch(err => {
        console.log("查看错误信息")
      })
    },
    /**
     * 获取绑定状态
     * @return {[type]} [description]
     */
    setTaskBinding() {
      if (this.mobile) {
        this.$heshop.plugin("post", { include: "task", model: "task" }, {
          "number": this.mobile,
          "keyword": "binding"
        }).then(res => {
          console.log("直接提交执行任务")
          if (res && res.msg) {
            this.getTaskBinding();
            // this.popupsList.push({
            //   display: true,
            //   remark: res.msg
            // })
            // uni.setStorageSync('statusTaskBinding', 1);
          }
        }).catch(err => {
          console.log("返回绑定错误信息", err)
        })
      }
    },
    /**
     * 执行用户绑定处理
     * @return {[type]} [description]
     */
    statusTaskPerfect() {
      let that = this;
      //判断当前任务是否打开
      that.$heshop.plugin("get", { include: "task", model: "task", keyword: "perfect" }).then(res => {
        if (res.status) {
          const value = uni.getStorageSync('statusTaskPerfect');
          if (!value) {
            this.perfect = res;
          }
          this.getTaskPerfect();
        }
      }).catch(err => {
        console.log("err", err)
      })
    },
    /**
     * 获取获取设置状态
     * @return {[type]} [description]
     */
    getTaskPerfect() {
      //用于单次提示
      const value = uni.getStorageSync('statusTaskPerfect');
      if (value) {
        this.perfect = {};
        return true
      }
      this.$heshop.plugin("get", { include: "task", model: "score", type: 'single', keyword: 'perfect' }).then(res => {
        console.log("查看用户绑定信息", res)
        //判断如果存在的状态下
        if (res && res.status === 0) {
          this.perfect = {};
          this.popupsList.push({
            display: true,
            remark: res.remark
          })
          this.$parent.handleLoadData()
          uni.setStorageSync('statusTaskPerfect', 1);
        } else if (res && res.status === 1) {
          this.perfect = {};
        } else {
          //如果没有记录的状态下
          this.setTaskPerfect();
        }

      }).catch(err => {
        console.log("查看错误信息")
      })
    },
    /**
     * 获取绑定状态
     * @return {[type]} [description]
     */
    setTaskPerfect() {
      this.$heshop.plugin("post", { include: "task", model: "task" }, {
        "number": 1,
        "keyword": "perfect"
      }).then(res => {
        console.log("重新执行用户绑定信息", res)
        if (res && res.msg) {
          this.popupsList.push({
            display: true,
            remark: res.msg
          })
          this.$parent.handleLoadData()
          this.perfect = {};
          uni.setStorageSync('statusTaskPerfect', 1);
        }
      }).catch(err => {
        console.log("返回绑定错误信息", err)
      })
    },
    // 跳转
    navigateTo: function(url) {
      uni.navigateTo({ url: url });
    },
    //  清理缓存
    clearStorage: function() {
      this.isClear = true;
    },
    bindPhone: function() {
      if (this.isLogin) {
        if (this.mobile) {
          this.isBind = true;
        } else {
          this.navigateTo("/pages/user/bind-phone");
        }
      } else {
        this.navigateTo('/pages/user/login')
      }
    },
    // #ifndef H5
    getPhoneNumber: function(e) {
      let _this = this;
      let errMsg = e.detail.errMsg;
      if (errMsg === "getPhoneNumber:ok") {
        uni.login({
          success(res) {
            if (res.code) {
              setTimeout(function() {
                _this.$heshop
                  .users(
                    "put", {
                      behavior: "bindMobile",
                    }, {
                      code: res.code,
                      encryptedData: e.detail.encryptedData,
                      iv: e.detail.iv,
                    }
                  )
                  .then(function(res) {
                    _this.$store.state.apply.userInfo.mobile = res.mobile;
                    let userInfo = uni.getStorageSync("userInfo");
                    userInfo.mobile = res.mobile;
                    uni.setStorageSync("userInfo", userInfo);
                  })
                  .catch(function(err) {
                    _this.$toError(err);
                  });
              }, 800);
            } else {
              _this.$toError(res);
            }
          },
        });
      } else if (errMsg === "getPhoneNumber:fail user deny") {}
    },
    // #endif
    isEmpty: function(data) {
      return !this.$h.test.isEmpty(data.time);
    },
  },
};

</script>
<style scoped lang="scss">
.task-user-tips {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #E60B30;
  line-height: 78rpx;
  width: 50%;
  z-index: 1;
  position: absolute;
  right: 70px;
  text-align: right;
}

.user-features {
  margin: 20px 20px 0 20px;
  padding: 20px 0;
  background: #ffffff;
  border-radius: 16px;
}

.he-item {
  line-height: 80px;
  padding: 0 24px;

  .he-content-text {
    .he-text {
      text-align: left;
    }
  }

  .he-time {
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #8c8c8c;
    line-height: 1.2;
    margin-top: -10px;
    padding-left: 20px;
  }
}

.iconbtn_arrow {
  font-size: 22px;
}

.iconpersonalcenter_contactus,
.iconpersonalcenter_clearcache,
.iconpersonalcenter_phone,
.iconpersonalcenter_address,
.iconpersonalcenter_phone2,
.iconpersonalcenter_information,
.iconpersonalcenter_add {
  font-size: 28px;
  color: #d7d7d7;
}

.he-text {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #222222;
  margin-left: 20px;
}

/*#ifndef H5*/
.he-item__btn {
  background-color: #ffffff;
}

.he-item__btn:after {
  display: none;
}

/*#endif*/
.he-mobile {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-right: 14px;
}

</style>
